<template>
  <view class="goods-list">
    <view class="goods-item">
      <view class="item-row1"><text>待发货</text></view>
      <view class="item-row2">
        <view class="item-middle"></view>
        <view class="item-right">
          <text class="item-title">这是标题这是标题这是标题这是标题题这是标题</text>
          <text class="item-volume">
            <text>数量:1</text>
            <text>规格：50ml</text>
          </text>
          <text class="item-money">
            <text class="money">￥600</text>
            <text class="point">1500积分</text>
          </text>
        </view>
      </view>
    </view>
    <view class="goods-pay">
      <view class="row1">
        <text class="goodsprice">商品价格</text>
        <text class="money">￥600.00</text>
      </view>
      <view class="row1">
        <text class="spend">运费</text>
        <text class="free">免配送费</text>
      </view>
      <view class="row1">
        <text class="paypoint">支付积分</text>
        <text class="point">1500积分</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'my-goods',
  data() {
    return {};
  }
};
</script>

<style lang="scss">
.goods-list {
  width: 100vw;
  height: 100vh;
  background-color: #e9eaed;
  display: flex;
  flex-direction: column;
  align-items: center;
  .goods-item {
    width: 690rpx;
    margin: 0 30rpx;
    height: 314rpx;
    background-color: #ffffff;
    margin-top: 25rpx;
    border-radius: 26rpx;
    display: flex;
    position: relative;
    flex-direction: column;
    .item-row1 {
      height: 88rpx;
      border-bottom: 1rpx solid #c4c4c4;
      text {
        margin-left: 30rpx;
      }
    }
    .item-row2 {
      
    }
    .item-middle {
      width: 150rpx;
      height: 150rpx;
      background-color: #aeaeae;
      margin-top: 36rpx;
      margin-left: 35rpx;
    }
    .item-right {
      display: flex;
      flex-direction: column;
      margin-left: 47rpx;
      .item-title {
        color: #333;
        font-size: 26rpx;
        margin-top: 36rpx;
      }
      .item-money {
        font-size: 26rpx;
        margin-top: 18rpx;
        display: flex;
        justify-content: flex-end;
        // margin-bottom: 21rpx;
        .money {
          color: #333;
        }
        .point {
          color: #e0bc60;
          margin-right: 33rpx;
        }
      }
      .item-volume {
        color: #999999;
        font-size: 24rpx;
        display: flex;
        margin-top: 25rpx;
        text {
          margin-right: 8rpx;
        }
      }
      .item-numberBox {
        margin-top: 28rpx;
      }
    }
    .item-dele {
      margin-top: 35rpx;
      margin-left: 50rpx;
    }
  }

  .goods-pay {
    width: 690rpx;
    height: 270rpx;
    background-color: #ffffff;
    margin: 0 30rpx;
    border-radius: 26rpx;
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 33rpx 28rpx;
    box-sizing: border-box;
    .row1 {
      display: flex;
      justify-content: space-between;
      text {
        color: #333333;
        font-size: 28rpx;
      }
    }
    .row2 {
      display: flex;
      justify-content: space-between;
      border: 1rpx solid #c4c4c4;
      text {
        color: #333333;
        font-size: 28rpx;
      }
    }
    .row3 {
      display: flex;
      justify-content: space-between;
      .paypoint {
        font-weight: 700;
        color: #333333;
        font-size: 28rpx;
      }
      .point {
        color: #e0bc60;
        font-weight: 700;
        font-size: 28rpx;
      }
    }
  }
}
</style>
